<template>
  <div class="registerbox">
    <el-card class="gray-card no-border no-margin-top" shadow="never">
      <div class="card-head">
        <div>培训信息</div>
      </div>
      <el-form ref="form" :model="form" class="form">
        <el-row>
          <el-col :span="12">
            <el-form-item label="培训编码：">
              <el-input v-model="form.trainingNo" :disabled="disabled"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="培训科室：">
              <treeselect :disabled="disabled" v-model="form.deptId" :options="deptOptions" :show-count="true"
                          placeholder="请选择培训科室"/>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="培训名称：">
          <el-input type="textarea" class="textarea"
                    :rows="4"
                    :disabled="disabled"
                    placeholder="请输入内容"
                    v-model="form.trainingName">
          </el-input>
        </el-form-item>

        <el-form-item label="培训地点：">
          <el-input type="textarea" class="textarea"
                    :rows="4"
                    :disabled="disabled"
                    v-model="form.local"></el-input>
        </el-form-item>

        <el-row>
          <el-col :span="12">
            <el-form-item label="培训开始时间：">
<!--              <el-input v-model="form.startTime" :disabled="disabled"></el-input>-->
              <el-date-picker
                v-model="form.startTime"
                :disabled="disabled"
                type="datetime"
                placeholder="选择培训开始时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="培训结束时间：">
<!--              <el-input v-model="form.endTime" :disabled="disabled"></el-input>-->
              <el-date-picker
                v-model="form.endTime"
                :disabled="disabled"
                type="datetime"
                placeholder="选择培训结束时间"
              >
              </el-date-picker>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="培训形式：">
<!--              <el-input v-model="form.type"></el-input>-->
              <el-select v-model="form.type" placeholder="请选择培训形式" :disabled="disabled">
                <el-option
                  v-for="item in typeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="培训讲师：">
              <el-input v-model="form.lecturer" :disabled="disabled"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-form-item label="培训人员：">
          <el-input type="textarea" class="textarea"
                    :rows="4"
                    :disabled="disabled"
                    placeholder="请输入内容"
                    v-model="form.student">
          </el-input>
        </el-form-item>
        <el-row>
          <el-col :span="12">
            <el-form-item label="所属项目：">
              <el-select v-model="form.projectId" placeholder="请选择所属项目" :disabled="disabled">
                <el-option
                  v-for="item in prjectList"
                  :key="item.id"
                  :label="item.projectName"
                  :value="item.id">
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="card-head">
        <div>培训总结</div>
      </div>
      <el-card class="gray-card no-margin-top">
        <el-form ref="form" :model="form" class="form">

          <el-form-item label="人员签到表：">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"

            >
              <el-button class="blue" size="small">上传</el-button>

            </el-upload>
          </el-form-item>
          <el-form-item label="培训考核表：">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"

            >
              <el-button class="blue" size="small">上传</el-button>

            </el-upload>
          </el-form-item>
          <el-form-item label="培训相关资料：">
            <el-upload
              class="avatar-uploader"
              action="https://jsonplaceholder.typicode.com/posts/"
              :show-file-list="false"

            >
              <el-button class="blue" size="small">上传</el-button>

            </el-upload>
          </el-form-item>

        </el-form>


      </el-card>


    </el-card>
    <div class="details-foot" v-if="!disabled">
      <div class="cell-btn">
        <el-button type="primary" @click.native="onSubmit">立即创建</el-button>
        <el-button @click.native="handleClose">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>

import {addTrainingRecords, updateTrainingRecords} from "@/api/business/trainingRecords"
import {selectList} from "@/api/business/project"
import {treeselect} from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css";
import {parseTime} from '@/utils/ruoyi'

export default {
  name: "addTraining",
  props: {
    disabled: {
      type: Boolean,
      default: false
    }
  },
  components: {Treeselect},
  data() {
    return {
      title: '新增',
      deptNode: null,
      deptOptions: undefined,
      defaultProps: {
        children: "children",
        label: "label"
      },
      prjectList: [],
      typeList:[
        {
          label: '线上',
          value: '线上'
        },
        {
          label: '线下',
          value: '线下'
        }
      ],
      form: {
        id: null,
        trainingNo: '',
        deptId: 100,
        trainingName: '',
        local: '',
        startTime: '',
        endTime: '',
        type: '',
        lecturer: '',
        student: '',
        projectId: ''
      }
    }
  },
  created() {
    this.getTreeselect();
    this.handleGetProjectList()
  },
  methods: {
    onSubmit() {
      this.form.startTime = parseTime(this.form.startTime)
      this.form.endTime = parseTime(this.form.endTime)
      if (this.form.id == null || this.form.id == undefined) {
        addTrainingRecords(this.form).then((res) => {
          this.$message.success('操作成功')
          this.handleClose()
        })
      } else {
        updateTrainingRecords(this.form).then((res) => {
          this.$message.success('操作成功')
          this.handleClose()
        })
      }
    },
    handleData(obj) {
      this.form.id = obj.id
      this.form.trainingNo = obj.trainingNo
      this.form.deptId = obj.deptId
      this.form.trainingName = obj.trainingName
      this.form.local = obj.local
      this.form.startTime = obj.startTime
      this.form.endTime = obj.endTime
      this.form.type = obj.type
      this.form.lecturer = obj.lecturer
      this.form.student = obj.student
      this.form.projectId = obj.projectId
    },
    // 获取项目
    handleGetProjectList() {
      selectList().then((res) => {
        if (res) {
          this.prjectList = res
        }
      })
    },
    /** 查询部门下拉树结构 */
    getTreeselect() {
      treeselect().then(response => {
        this.deptOptions = response.data;
      });
    },
    handleAvatarSuccess() {

    },
    beforeAvatarUpload() {

    },
    handleClose() {
      this.form.trainingNo = ''
      this.form.deptId = ''
      this.form.trainingName = ''
      this.form.local = ''
      this.form.startTime = ''
      this.form.endTime = ''
      this.form.type = ''
      this.form.lecturer = ''
      this.form.student = ''
      this.form.projectId = ''
      this.form.id = null
      this.$emit('close', false)
    }
  }
}
</script>

<style scoped>

</style>
